<template>
  <div>
    <el-dialog
      title="报价详情"
      :visible.sync="showDialog"
      append-to-body
      destroy-on-close="true"
      :close-on-click-modal="false"
      @close="close"
      width="70%"
    >
      <avue-crud
        ref="crud"
        :table-loading="loading"
        v-model="form"
        :data="data"
        :option="option"
        :permission="getpermission"
        @on-load="tableonLoad"
        @row-save="rowSave"
      >
        <template slot="shippingDateETD" slot-scope="{ row }">
          {{ row.shippingDateETD }}
        </template>
        <template slot="scheduleEta" slot-scope="{ row }">
          {{ row.scheduleEta }}
        </template>
        <template slot="menuLeft">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            v-if="getpermission('adddetailBtn')"
            @click="addDetail()"
            >新增</el-button
          >
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button
            type="text"
            icon="el-icon-date"
            size="small"
            v-if="getpermission('historicalBtn', row)"
            @click="historicalquotation(row)"
            tip="管理员"
            >历史议价</el-button
          >
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            v-if="getpermission('modifyBtn', row)"
            @click="adminmodifyquotation(row)"
            tip="管理员"
            >修改报价</el-button
          >
          <el-button
            type="text"
            icon="el-icon-finished"
            size="small"
            v-if="getpermission('confirmBtn', row)"
            @click="confirmwin(row)"
            tip="管理员"
            >确认中标</el-button
          >
          <el-button
            type="text"
            icon="el-icon-close"
            size="small"
            v-if="getpermission('confirmBtn', row)"
            @click="didNotWinTheBid(row)"
            tip="管理员"
            >未中标</el-button
          >
          <el-button
            type="text"
            icon="el-icon-date"
            size="small"
            v-if="getpermission('historicalofferBtn', row)"
            @click="historicalquotation(row)"
            >历史议价</el-button
          >
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            v-if="getpermission('modifyofferBtn', row)"
            @click="modifyquotation(row)"
            >修改报价</el-button
          >
        </template>
      </avue-crud>
      <div slot="footer">
        <el-button @click="close()" type="primary">关闭</el-button>
      </div>
    </el-dialog>

    <historicalBarrier
      ref="historicalBarrier"
      :modifyData="modifyData"
      :identity="identity"
    ></historicalBarrier>
    <bargainingHistorical
      ref="bargainingHistorical"
      :historyids="historyids"
    ></bargainingHistorical>
  </div>
</template>

<script>
import {
  getListbarrierDetail,
  addbarrierlimit,
} from "@/api/inquiry/foreigntrade/index";
import { mapGetters } from "vuex";
import {
  getListCarrier,
  makesure,
  didNotWinTheBid,
  admingetListCarrier,
} from "@/api/inquiry/domestictrade/index";
import historicalBarrier from "./historicalBarrier.vue";
import bargainingHistorical from "./bargainingHistorical.vue";
export default {
  name: "barrierDetail",
  props: {
    ids: {},
  },
  components: {
    historicalBarrier,
    bargainingHistorical,
  },
  data() {
    return {
      query: {},
      form: {},
      data: [],
      showDialog: false,
      callback: () => {},
      loading: false,
      identity: {},
      modifyData: null,
      historyids: {},
      ranking: true,
      adminmenushow: "",
      menushow: "",
    };
  },
  watch: {
    ids() {
      this.query = { id: this.ids.id, carrierId: this.ids.carrierId };
      this.adminmenushow = this.ids.menushow;
      this.ranking = this.ids.ranking;
      this.tableonLoad();
    },
  },
  computed: {
    ...mapGetters(["permission"]),
    option() {
      return {
        height: "auto",
        calcHeight: 30,
        align: "center",
        headerAlign: "center",
        border: true,
        searchLabelWidth: 120,
        searchMenuSpan: 6,
        index: false,
        indexLabel: "排名",
        tip: false,
        viewBtn: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        editBtn: false,
        delBtn: false,
        labelWidth: 120,
        menuWidth: 300,
        column: [
          {
            label: "船公司",
            prop: "shippingCompany",
            rules: [
              { required: true, trigger: "blur", message: "船公司不能为空" },
            ],
          },
          {
            label: "合计",
            prop: "total",
            editDisplay: false,
            addDisplay: false,
          },
          {
            label: "海运费（USD）",
            prop: "shippingFee",
            labelWidth: 140,
            controls: false,
            type: "number",
            rules: [
              {
                required: true,
                trigger: "blur",
                message: "海运费不能为空,且必须为数字",
              },
            ],
          },
          {
            label: "港杂费（CNY）",
            prop: "portCharges",
            labelWidth: 140,
            controls: false,
            type: "number",
            rules: [
              {
                required: true,
                trigger: "blur",
                message: "港杂费不能为空,且必须为数字",
              },
            ],
          },
          {
            label: "船期_ETD",
            slot: true,
            prop: "shippingDateETD",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            mock: {
              type: "datetime",
              format: "yyyy-MM-dd",
            },
            rules: [
              { required: true, trigger: "blur", message: "船期_ETD不能为空" },
            ],
          },
          {
            label: "船期_ETA",
            slot: true,
            prop: "scheduleEta",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            mock: {
              type: "datetime",
              format: "yyyy-MM-dd",
            },
            rules: [
              { required: true, trigger: "blur", message: "船期_ETA不能为空" },
            ],
          },
          {
            label: "起运港(箱使/天)",
            prop: "departurePortBoxAngel",

            labelWidth: 140,
            rules: [
              {
                required: true,
                trigger: "blur",
                message: "起运港(箱使/天)不能为空",
              },
            ],
          },
          {
            label: "目的港(箱使/天)",
            labelWidth: 140,
            prop: "destinationPortBoxAngel",
            rules: [
              {
                required: true,
                trigger: "blur",
                message: "目的港(箱使/天)不能为空",
              },
            ],
          },
          {
            label: "是否直达",
            prop: "isItDirect",
            rules: [
              { required: true, trigger: "blur", message: "是否直达不能为空" },
            ],
          },
          {
            label: "报价说明",
            prop: "quoteDescription",
          },
          {
            label: "状态",
            prop: "quotationStatus",
            display: false,
          },
        ],
      };
    },
  },
  methods: {
    getpermission(key, row) {
      switch (key) {
        case "closeBtn":
          return this.permission.foreign_close_offer_m;
        case "modifyBtn":
          return (
            this.permission.foreign_modify_quotation_m &&
            (this.adminmenushow == "待确认" ||
              this.adminmenushow == "待接受") &&
            this.ranking
          );
        case "confirmBtn":
          return (
            this.permission.foreign_confirm_winning_m &&
            (this.adminmenushow == "待确认" ||
              this.adminmenushow == "待接受") &&
            (row.quotationStatus == "待确认" ||
              row.quotationStatus == "待接受") &&
            this.ranking
          );
        case "historicalBtn":
          return this.permission.foreign_historical_bargaining_m;
        case "historicalofferBtn":
          return (
            this.permission.foreign_historical_bargaining &&
            !this.permission.foreign_domestictrade_detail_m
          );
        case "adddetailBtn":
          return (
            this.permission.foreign_add_barrier &&
            !this.permission.foreign_domestictrade_detail_m &&
            !this.ranking
          );
        case "modifyofferBtn":
          return (
            this.permission.foreign_modify_bargaining &&
            (this.adminmenushow == "待确认" ||
              this.adminmenushow == "待接受") &&
            row.isNotMy
          );
        default:
          break;
      }
      return true;
    },
    addDetail() {
      addbarrierlimit().then((res) => {
        let dataarr = res.data.data;
        if (dataarr[4].dictValue > this.data.length) {
          this.$refs.crud.rowAdd();
          return;
        }
        this.$message.success("已超过最大可添加数");
      });
    },
    historicalquotation(row) {
      this.historyids = {
        id: row.id,
      };
      this.$refs.bargainingHistorical.open(row, {
        callback: () => {},
      });
    },
    modifyquotation(row) {
      this.modifyData = row;
      this.identity = {
        isManagement: false,
        showoff: { display: "none" },
        barriershowoff: { display: "" },
      };
      this.$refs.historicalBarrier.open(row, {
        callback: (res) => {
          getListCarrier({ id: res.id, startId: res.id }, res).then(() => {
            this.$message.success("操作成功");
            this.$refs.historicalBarrier.close();
            this.tableonLoad();
          });
        },
      });
    },
    adminmodifyquotation(row) {
      this.modifyData = row;
      this.identity = {
        isManagement: true,
        barriershowoff: { display: "none" },
        showoff: { display: "" },
        quotedPrice: row.quotedPrice,
      };
      this.$refs.historicalBarrier.open(row, {
        callback: (res) => {
          admingetListCarrier({ id: res.id, startId: res.id }, res).then(() => {
            this.$message.success("操作成功");
            this.$refs.historicalBarrier.close();
            this.tableonLoad();
          });
        },
      });
    },
    // 确定中标
    confirmwin(row) {
      this.loading = true;
      this.$prompt("请输入中标箱量", "中标箱量", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[1-9]\d*$/,
        inputErrorMessage: "请输入中标箱量",
      })
        .then(({ value }) => {
          makesure({ id: row.id, winningBoxQuantity: value }).then(() => {
            this.$message.success("操作成功");
            this.tableonLoad();
          });
        })
        .catch(() => {
          this.loading = false;
        });
      // makesure({ id: row.id }).then(() => {
      //   this.$message.success("操作成功");
      //   this.tableonLoad();
      // });
    },
    // 未中标
    didNotWinTheBid(row) {
      this.loading = true;
      didNotWinTheBid({ id: row.id }).then(() => {
        this.$message.success("操作成功");
        this.tableonLoad();
      });
    },
    rowSave(form, done, loading) {
      getListCarrier({ id: this.ids.needsID, startId: this.ids.needsID }, form)
        .then((res) => {
          loading();
          if (res.data.code === 200 && res.data.success) {
            this.tableonLoad();
            this.$message({
              type: "success",
              message: "操作成功",
            });
            done();
          } else {
            this.$message({
              type: "warning",
              message: "操作失败",
            });
          }
        })
        .catch(() => {
          this.tableonLoad();
          done();
        });
    },
    tableonLoad(page, params = {}) {
      this.loading = true;
      getListbarrierDetail(Object.assign(params, this.query)).then((res) => {
        this.loading = false;
        this.data = res.data.data;
        this.$refs.crud.doLayout();
      });
    },
    open(id, { callback }) {
      this.callback = callback;
      this.showDialog = true;
    },
    close() {
      this.callback("refresh");
      this.showDialog = false;
    },
  },
};
</script>

<style></style>
